import * as React from 'react'
import { RouteComponentProps } from 'react-router-dom'
import { IUser } from '../../types'
import style from './style.less'
import Nav from '../../components/Nav'
import * as api from "../../services/api"

interface State {
  user: IUser
}

export default class Login extends React.Component<RouteComponentProps> {
  state: State = {
    user: null
  }
  
  async logout() {
    let result = await api.logout()
    if (result.stat === "OK") {
      this.props.history.push("/login")
    }
  }

  async userinfo() {
    let result = await api.userInfo()
    if (result.stat === "OK") {
      this.setState({user: result.data})
    } else {
      this.props.history.push("/login")
    }
  }

  componentDidMount() {
    this.userinfo()
  }

  render() {
    return (
      <div className={style.back}>
        <div className={style.wrapper}>
          <img className={style.avater} src={this.state.user?.avatar}></img>
          <div className={style.text}>{this.state.user?.nickname}</div>
          <button className={style.outputButton} onClick={this.logout.bind(this)} >退出登录</button>
        </div>
        <Nav />
      </div>
    )
  }
}